<template>
  <el-dialog
          :model-value="dialogRelVideoVisible"
          :title="dialogRelVideoTitle"
          :before-close="handleCancelVideoDialog"
          top="5vh"
          width="65%"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="filetype == 'video' ? '云存储视频' : '云存储音频' + '介质'" name="storage" v-if="videotype != 'live'">
        <storage-medium
                ref="storageMediumRef"
                :form-data="videoFormData"
                :mediumtype="filetype"
                :mediatype="dialogRelVideoMediatype"
                :relAction="dialogRelAction"
                :select-type="dialogSelectType"
                @handleVideoPlay="handleVideoPlay"
        />
      </el-tab-pane>
      <el-tab-pane :label="filetype == 'video' ? '云媒资视频' : '云媒资音频' +  '介质'" name="cloudmedia">
        <video-medium
                ref="videoMediumRef"
                :form-data="videoFormData"
                :media-type="dialogRelVideoMediatype"
                :select-type="dialogSelectType"
                :rel-action="dialogRelAction"
                :videotype="videotype"
                :filetype="filetype"
                @handleVideoPlay="handleVideoPlay"
        />
      </el-tab-pane>
      <el-tab-pane label="新建网络视频介质" name="networkmedium" v-if="filetype === 'video'">
        <network-medium
                ref="createVideoRef"
                :createVideoFormData="createVideoFormData"
                :createVideoActiveName="createVideoActiveName"
                :videotype="videotype"
                @changeActiveName="changeActiveName"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancelVideoDialog">取消</el-button>
        <el-button type="primary" size="mini" v-if="activeName == 'networkmedium'" @click="handleCreateVideo">保存并关联</el-button>
        <el-button type="primary" size="mini" v-else @click="handleConfirmSelected">确定选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {ref, toRef, nextTick, reactive} from 'vue'
  import StorageMedium from "./StorageMedium";
  import VideoMedium from "./VideoMedium";
  import NetworkMedium from "./NetworkMedium";
  import {ElMessage} from 'element-plus'
  import {mediaRelVideos, seriesRelVideos} from "@/api/media/media";
  import {packageRelVideo} from "@/api/package/material";

  export default {
    name: "RelVideoMedium",
    components: {StorageMedium, VideoMedium, NetworkMedium},
    props: {
      dialogRelVideoVisible: {
        type: Boolean,
        default: false
      },
      dialogRelVideoTitle: {
        type: String
      },
      dialogRelVideoMediatype: {
        type: String,
        default: 'media'
      },
      dialogRelVideoFormData: {
        type: Object
      },
      dialogSelectType: {
        type: String,
        default: 'checkbox'
      },
      dialogRelAction: {
        type: String,
        default: 'relmedium'
      },
      videotype: {
        type: String,
        default: undefined
      },
      filetype: {
        type: String,
        default: 'video'
      }
    },
    emits: ['handleCancelVideoDialog', 'handleVideoPlay', 'reloadMediaData'],
    setup(props, context) {
      const videoFormData = toRef(props, 'dialogRelVideoFormData')
      const activeName = ref('storage')
      const storageMediumRef = ref(null)
      const videoMediumRef = ref(null)
      const createVideoFormData = reactive({
        videotype: 'vod',
        name: '',
        layout: '',
        url: '',
        mimetype: '',
        groupid: props.dialogRelVideoFormData.groupid,
        pushurl: '',
        shifturl: '',
        reviewurl: '',
        protocol: '',
        livestate: '',
        starttime: '',
        endtime: ''
      })
      const createVideoRef = ref(null)
      const createVideoActiveName = ref('vod')

      const handleClick = (tab) => {
        videoFormData.value.datas = []
        if (tab.props.name == 'cloudmedia') {
          nextTick(() => {
            videoMediumRef.value.init()
          })
        } else if(tab.props.name == 'storage') {
          nextTick(() => {
            if (storageMediumRef.value.isRoot) {
              init()
            } else {
              storageMediumRef.value.getFolderFileList()
            }
          })
        } else {
          resetCreateVideoFormData()
          if (props.videotype) {
            createVideoActiveName.value = props.videotype
            createVideoFormData.videotype = props.videotype
          } else {
            createVideoActiveName.value = 'vod'
          }
          nextTick(() => {
            createVideoRef.value.init()
          })
        }
      }
      const resetCreateVideoFormData = () => {
        createVideoFormData.videotype = 'vod'
        createVideoFormData.name = ''
        createVideoFormData.url = ''
        createVideoFormData.mimetype = ''
        createVideoFormData.layout = ''
        createVideoFormData.groupid = props.dialogRelVideoFormData.groupid
        createVideoFormData.pushurl = ''
        createVideoFormData.shifturl = ''
        createVideoFormData.reviewurl = ''
        createVideoFormData.protocol = ''
        createVideoFormData.livestate = ''
        createVideoFormData.starttime = ''
        createVideoFormData.endtime = ''
      }
      /** 确定选择 **/
      const handleConfirmSelected = () => {
        if (videoFormData.value.datas.length <= 0) {
          ElMessage({type: 'warning', message: '请选择视频介质', duration: 2000})
        } else {
          if (props.dialogRelVideoMediatype == 'media') {
            if (activeName.value == 'storage') {
              videoFormData.value.datatype = 2
            } else {
              videoFormData.value.datatype = 1
            }
            mediaRelVideos(videoFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelVideoDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          } else if (props.dialogRelVideoMediatype == 'series') {
            if (activeName.value == 'storage') {
              videoFormData.value.datatype = 2
            } else {
              videoFormData.value.datatype = 1
            }
            seriesRelVideos(videoFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelVideoDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          } else if(props.dialogRelVideoMediatype == 'package') {
            if (activeName.value == 'storage') {
              videoFormData.value.datatype = 2
            } else {
              videoFormData.value.datatype = 1
            }
            packageRelVideo(videoFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelVideoDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          }
        }
      }

      /** 关闭弹框 **/
      const handleCancelVideoDialog = () => {
        context.emit('handleCancelVideoDialog')
      }
      /** 初始化 **/
      const init = () => {
        if (props.videotype == 'live') {
          activeName.value = 'cloudmedia'
          videoMediumRef.value.init()
        } else {
          activeName.value = 'storage'
          storageMediumRef.value.init()
        }
      }
      /** 播放视频 **/
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      const changeActiveName = (activename) => {
        createVideoActiveName.value = activename
      }
      const handleCreateVideo = () => {
        if (createVideoActiveName.value == 'vod') {
          createVideoRef.value.vodVideoFormRef.validate(valid => {
            if (valid) {
              doCreateVideo()
            }
          })
        } else {
          createVideoRef.value.liveVideoFormRef.validate(valid => {
            if (valid) {
              doCreateVideo()
            }
          })
        }
      }
      const doCreateVideo = () => {
        videoFormData.value.datatype = 3
        if (props.dialogRelVideoMediatype == 'media') {
          videoFormData.value.datas = [createVideoFormData]
          mediaRelVideos(videoFormData.value).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              handleCancelVideoDialog()
              context.emit('reloadMediaData', response.data)
            }
          })
        } else if (props.dialogRelVideoMediatype == 'series') {
          videoFormData.value.datas = [createVideoFormData]
          seriesRelVideos(videoFormData.value).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              handleCancelVideoDialog()
              context.emit('reloadMediaData', response.data)
            }
          })
        } else {
          videoFormData.value.datas = [createVideoFormData]
          packageRelVideo(videoFormData.value).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              handleCancelVideoDialog()
              context.emit('reloadMediaData', response.data)
            }
          })
        }
      }

      return {
        handleClick,
        activeName,
        handleCancelVideoDialog,
        videoFormData,
        handleVideoPlay,
        storageMediumRef,
        videoMediumRef,
        handleConfirmSelected,
        createVideoFormData,
        createVideoRef,
        createVideoActiveName,
        changeActiveName,
        handleCreateVideo,
        init
      }
    }
  }
</script>

<style scoped>

</style>
